import { cur_event_check } from '../../../Classes/cla_event_check';
import { listenCssVar_mana } from '../../../Classes/cla_listenCssVar_mana';
import { forBindEventThis } from '../../forBindEventThis';
import { drag_dom_dataMana } from './cla_drag_dom_dataMana';

const drag_dom_operateTag = 'drag_dom_operate';
/**
 * 当前 元素 的 cssvarObj 事件 管理
 */
let cssvarObj: listenCssVar_mana;

export class drag_dom_operate extends drag_dom_dataMana {
  get [Symbol.toStringTag]() {
    return drag_dom_operateTag;
  }

  constructor(props: HTMLElement) {
    super(props);

    forBindEventThis(this);
  }

  /**
   * 装载 拖动 事件
   */
  init() {
    // 移入
    this.eventM.addEventListen(
      this.target_dom,
      'mouseenter',
      this.eventBind.targetEl_mouse_enter
    );

    // 移除
    this.eventM.addEventListen(
      this.target_dom,
      'mouseleave',
      this.eventBind.targetEl_mouse_leave
    );
  }

  /**
   * 移除 所有拖动 事件
   */
  remove() {
    // // 删除 移入
    // this.eventM.removeEventListen(
    //   this.target_dom,
    //   'mouseenter',
    //   this.eventBind.targetEl_mouse_enter
    // );

    // // 删除 移除
    // this.eventM.removeEventListen(
    //   this.target_dom,
    //   'mouseleave',
    //   this.eventBind.targetEl_mouse_leave
    // );
    this.eventM.freeze_all();

    // 删除 window 挂载 事件
  }

  /**
   * 鼠标 移入 元素
   */
  targetEl_mouse_enter() {
    // enter down
    this.eventM.addEventListen(
      this.target_dom,
      'mousedown',
      this.eventBind.targetEl_mouse_enter_leftDown
    );

    // enter up
    this.eventM.addEventListen(
      this.target_dom,
      'mouseup',
      this.eventBind.targetEl_mouse_enter_leftDown_leftUp
    );
  }

  /**
   * 鼠标 移出 元素
   */
  targetEl_mouse_leave() {
    // remove down
    this.eventM.removeEventListen(
      this.target_dom,
      'mousedown',
      this.eventBind.targetEl_mouse_enter_leftDown
    );

    // remove up
    this.eventM.removeEventListen(
      this.target_dom,
      'mouseup',
      this.eventBind.targetEl_mouse_enter_leftDown_leftUp
    );
  }

  /**
   * 鼠标 移入 左键按下
   */
  targetEl_mouse_enter_leftDown(event: MouseEvent) {
    if (!cur_event_check.set_cur_event(event).left_click().result) {
      return;
    }

    let cur_target = event.currentTarget as HTMLElement;

    this.startTop = cur_target.offsetTop;

    this.mouseTop = event.pageY - this.startTop;

    this.startLeft = cur_target.offsetLeft;

    this.mouseLeft = event.pageX - this.startLeft;

    cssvarObj = this.cssvarObj;

    // win move
    this.eventM.addEventListen(
      window as any,
      'mousemove',
      this.eventBind.win_mouse_move
    );
  }

  /**
   * 鼠标 移入 左键按下 抬起
   */
  targetEl_mouse_enter_leftDown_leftUp(event: MouseEvent) {
    if (!cur_event_check.set_cur_event(event).left_click().result) {
      return;
    }

    // remove win move
    this.eventM.removeEventListen(
      window as any,
      'mousemove',
      this.eventBind.win_mouse_move
    );
  }

  /**
   * 鼠标 全局 移动
   * @param {MouseEvent} event
   */
  win_mouse_move(event: MouseEvent) {
    // followEl(event.pageY - this.mouseTop, event.pageX - this.mouseLeft);
    // console.log(this.framekey_lock);

    /**
     * 逻辑 修订
     * 一帧帧 触发 不然 或有 延迟 的 动画
     */
    if (this.framekey_lock) {
      return;
    }

    // 帧 锁定
    this.framekey_lock = true;

    requestAnimationFrame(() => {
      // 帧 解锁
      this.framekey_lock = false;
      // console.log('render');
      followEl(event.pageY - this.mouseTop, event.pageX - this.mouseLeft);
    });
  }
}

/**
 * 根据 top 和 left 的 值 设置 cssVar
 * @param top 默认不带单位 px
 * @param left 默认不带单位 px
 */
function followEl(top: number, left: number) {
  //   console.log(top, left);
  cssvarObj.setCssVar('--top', top + 'px');
  cssvarObj.setCssVar('--left', left + 'px');
}

/**
 * 设置 dragEl 的 默认 初始 位置
 * @param {HTMLElement} element
 * @param top 默认不带单位 px
 * @param left 默认不带单位 px
 */
export function set_dragEl_top_left(
  element: HTMLElement,
  top: number,
  left: number
) {
  cssvarObj = new listenCssVar_mana(element);

  followEl(top, left);
}
